<template>
    <div id="category" >
      <nav-bar class="nav-bar">
        <template #centernav><div>分类</div></template>
      </nav-bar>
  
        <div class="contain">
            <scroll class="content-side"  :prototype='3' ref="scrollleft" >
                <leftside :leftdata="categoryList" @getrightdata="getrightdata"></leftside>  
            </scroll>
            <scroll class="content-right" :prototype='3' ref="scrollright">
                <rightside :rightdata="rightList"></rightside>
            </scroll>
        </div>
        <!-- <scroll class="content" :pull-up-load="true">
          <category-side-content :subCategoryList="subCategoryList"></category-side-content>
        </scroll> -->
    
    </div>

    
</template>

<script>
  import NavBar from '@/components/common/navbar/NavBar.vue'
  import leftside from './childcoomps/leftside'
  import Scroll from '@/components/common/bscoll/Scorll.vue'
  import rightside from './childcoomps/rightside'
  import {getAllCategory,getSubCategory} from '../../network/category.js'
  export default {
    name: "Category",
    components: {
      NavBar,
      leftside,
      Scroll,
      rightside 
    //   CategorySideContent
    },
    data(){
      return{
        categoryList:[],
        rightList: [],
        leftKey:'',
        num:0
      }
    },
    created () {
        this.getinfo(this.num)
    },
    activated () {
    //   this.$refs.scroll.refresh()
    },
    methods: {
        getinfo(num){
        getAllCategory().then(res =>{
        this.categoryList = res.data.category.list
        this.leftKey = this.categoryList[num].maitKey
        getSubCategory(this.leftKey).then(rsu=>{
            this.rightList = rsu.data.list
            console.log(this.rightList)
        })
      })
        },
        getrightdata(i){
            this.getinfo(i)
            this.$refs.scrollright.bscoll.scrollTo(0,0,1)
            console.log(this.$refs.scrollright.bscoll)
        }
    }
  }
</script>

<style scoped>
#category{
     height: 100vh;
}
.nav-bar{
    background-color: deeppink;
    color:#fff;
}
.contain{
    height: 100vh;
}
.content-side{
    width: 80px;
    background-color: #fff;
    height: calc(100% - 93px);
    overflow: hidden;
}
.content-right {
    flex: 1;
    background-color: #fff;
    height: calc(100% - 93px);
    overflow: hidden;
}
.contain{
    display: flex;
}
li{
    height: 40px;
}
</style>